<template>
  <div>
    <ul>
      <!-- 调用组件，并绑定数据 -->
      <Tree :data="treeData"></Tree>
    </ul>
  </div>
</template>
<script lang="ts" setup>
// 导入递归组件
import Tree from "./components/Tree.vue";
import { ref } from "vue";

// 需要实现递归的数据
const treeData = ref({
  label: "1-1",
  id: 1,
  children: [
    {
      label: "1-1-1",
      id: 2,
    },
    {
      label: "1-1-2",
      id: 3,
      children: [
        {
          label: "1-1-2-1",
          id: 4,
        },
        {
          label: "1-1-2-2",
          id: 5,
        },
      ],
    },
    {
      label: "1-1-3",
      id: 6,
      children: [
        {
          label: "1-1-3-1",
          id: 7,
          children: [
            {
              label: "1-1-3-1-1",
              id: 8,
            },
            {
              label: "1-1-3-1-2",
              id: 9,
            },
            {
              label: "1-1-3-1-3",
              id: 10,
            },
          ],
        },
        {
          label: "1-1-3-2",
          id: 11,
          children: [
            {
              label: "1-1-3-2-1",
              id: 12,
            },
            {
              label: "1-1-3-2-2",
              id: 13,
            },
          ],
        },
        {
          label: "1-1-3-3",
          id: 4,
        },
      ],
    },
  ],
});
</script>
